<template>
  <van-nav-bar class="custom-nav" v-if="isShow" fixed>
    <!-- :style="{ 'padding-top': `${statusBarHeight}px` }" -->
    <template #left>
      <slot name="left">
        <van-icon v-if="meta.backUrl" name="arrow-left" size="13" color="#fff" @click="onClickLeft" />
      </slot>
    </template>
    <template #title>
      <slot name="title">
        <span class="fa-monitor">{{ meta.title }}</span>
      </slot>
    </template>
    <template #right>
      <slot name="right" />
    </template>
  </van-nav-bar>
</template>

<script setup>
import { ref, watch, computed, inject } from 'vue';
import { useRoute, useRouter } from 'vue-router';
/**
 * 仓库
 */
import useStore from '@/store/index';
// const statusBarHeight = inject('statusBarHeight');

const props = defineProps({
  custom: {
    type: Boolean,
    default: false
  }
});

const router = useRouter();
const meta = ref({});
const isShow = computed(() => {
  if (props.custom) return true;
  return meta.value.showNav;
});

watch(
  () => router.currentRoute.value.meta,
  metaVal => {
    meta.value = metaVal;
  },
  { immediate: true, deep: true }
);

function onClickLeft() {
  if (!meta.value.backUrl) return;

  if (meta.value.backUrl === 'parent') {
    router.push(router.options.history.state.back);
    return;
  }
  router.push({ path: meta.value.backUrl });
}
</script>
<style scoped lang="scss">
.custom-nav {
  background-color: $primary;
  z-index: 9;
}
:deep(.van-nav-bar__title, .van-nav-bar__right .van-icon) {
  color: #fff;
}
:deep(.van-nav-bar) {
  color: #fff;
}

.van-nav-bar {
  line-height: normal;
}
</style>
